<template>
  <yd-layout>
    <v-header slot="navbar">
      <div slot="left" @click="back">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </div>
      <yd-tab slot='center' v-model='activeIndex' height=".62rem" class='tab'>
        <yd-tab-panel label="商品"/>
        <yd-tab-panel label="详情"/>
        <yd-tab-panel label="推荐"/>
      </yd-tab>
      <yd-icon name="share3" slot="right" size=".4rem"></yd-icon>
    </v-header>
    <div :class="['comm_con', 'yd-tab-panel-item', {'yd-tab-active': activeIndex === 0}]">
      <box :bgImg='commDetail.imgSrc' prop="170:420" class="comm_logo"></box>
      <div class="list detail">
        <div class="list_nav">
          <span class="primary mr">{{ commDetail.integral }} + {{ commDetail.price }}</span> <span class="del">{{ commDetail.originalPrice }}</span>
        </div>
        <h3 class="strong list_title"><span class="mr">{{ commDetail.serverName }}</span>{{ commDetail.commName }}</h3>
        <div class="list_body">
          <div class="inline-block middle text-center">
            <div class="strong">助力销售</div>
            <p>55</p>
          </div>
          <div class="inline-block middle text-center">
            <div class="strong">
              当地增收
            </div>
            <p>2445.30元</p>
          </div>
          <div class="inline-block middle text-center">
            <div class="strong">
              帮扶贫困户
            </div>
            <p>10070</p>
          </div>
        </div>
        <div class="flex middle place">
          产自
          <div class="f1 strong place_con">中国 ▪ 陕西省 ▪ 咸阳市 ▪ 旬邑县 贫困县</div>
          <yd-icon name="more" size=".4rem"></yd-icon>
        </div>
      </div>
      <div class="list">
        <span class="mr">领券</span>
        <span class="primary mr">满3000减300</span>
        <span class="primary mr">满2000减200</span>
        <span class="primary">满1000减150</span>
      </div>
      <div class="list">
        <div class="inline-block top mr">促销</div>
        <div class="inline-block top primary">
          <p>满减券</p>
          <p>多买优惠</p>
          <p>会员特价</p>
        </div>
      </div>
      <div class="flex middle list">
        <span class="mr">已选</span>
        <div class="f1 strong">1件</div>
        <yd-icon name="more" size=".4rem"></yd-icon>
      </div>
      <div class="list">
        <div class="flex middle">
          <div class="mr label">送至</div>
          <div class="f1 strong">北京市朝阳区望京soho1号塔</div>
          <yd-icon name="more" size=".4rem"></yd-icon>
        </div>
        <div class="flex middle">
          <div class="mr label">配至</div>
          <div class="f1 strong">免运费（部分区域暂不支持购买）</div>
          <yd-icon name="more" size=".4rem"></yd-icon>
        </div>
        <div class="flex middle">
          <div class="mr label">产品保障</div>
          <div class="f1 strong">贫困地区自产</div>
          <yd-icon name="more" size=".4rem"></yd-icon>
        </div>
      </div>
      <div class="list">
        <div class="flex strong">
          <div class="f1">精彩好评(62)</div>
        </div>
      </div>
    </div>
    <div :class="['comm_con', 'yd-tab-panel-item', {'yd-tab-active': activeIndex === 1}]"></div>
    <div :class="['comm_con', 'yd-tab-panel-item', 'recommend', {'yd-tab-active': activeIndex === 2}]">
      <h2 class="title">您可能还在寻找</h2>
      <yd-list theme="3">
        <yd-list-item v-for="(item, key) in list" :key="key">
          <box slot="img" :bgImg ="item.img"/>
          <span slot="title">{{item.title}}</span>
          <yd-list-other slot="other">
            <div>
              <span class="demo-list-price"><em>¥</em>{{item.price}}</span>
              <span class="demo-list-del-price">¥{{item.w_price}}</span>
            </div>
            <div>content</div>
          </yd-list-other>
        </yd-list-item>
      </yd-list>
    </div>
    <cart-bottom slot="tabbar" @buy = "buy" @add = "add"></cart-bottom>
    <yd-popup v-model="show" position="bottom" height="45%">
      <div class="popup">
        <div class="top flex">
          <box bgImg="http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg" prop="99:114" class="comm_logo"/>
          <div class="f1">
            <div class="primary">500积分+¥ 39.90</div>
            <div class="desc">库存：  11件</div>
          </div>
        </div>
        <div class="label">
          净含量
        </div>
        <div class="flex weight_con">
          <div :class="['btn', {active: active === index}]" v-for = "(item, index) in weightLi" :key = "index" @click = "active = index">{{ item.title }}</div>
        </div>
        <div class="flex">
          购买数量
          <div class="f1 text-right">
            <spinner :min="0" v-model ="num" width = "1.16rem"></spinner>
          </div>
        </div>
      </div>
      <div class="popup" slot = "bottom">
        <yd-button size = "large" stype="warning" @click.native="submit">确定</yd-button>
      </div>
    </yd-popup>
  </yd-layout>
</template>
<script>
export default {
  name: 'comm-detail',
  data () {
    return {
      num: 0,
      activeIndex: 0,
      active: 0,
      tabLi: ['商品', '详情', '推荐'],
      commDetail: {},
      list: [],
      show: false,
      weightLi: [{
        title: '5斤'
      }, {
        title: '10斤'
      }]
    }
  },
  watch: {
    activeIndex: {
      immediate: true,
      handler (val) {
        if (val === 0) {
          this.initComm()
        } else if (val === 1) {
          this.initDetail()
        } else if (val === 2) {
          this.initRecommend()
        }
      }
    }
  },
  methods: {
    initComm () {
      this.commDetail = {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '电热水壶',
        serverName: '小家电',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '￥66.90',
        originalPrice: '96.90'
      }
    },
    initDetail () {
    },
    initRecommend () {
      this.list = [{
        img: 'http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg',
        title: '标题111标题标题标题标题',
        price: 156.23,
        w_price: 89.36
      }, {
        img: 'http://img1.shikee.com/try/2016/06/21/10172020923917672923.jpg',
        title: '标题222标题标题标题标题',
        price: 256.23,
        w_price: 89.36
      }, {
        img: 'http://img1.shikee.com/try/2016/06/23/15395220917905380014.jpg',
        title: '标题333标题标题标题标题',
        price: 356.23,
        w_price: 89.36
      }, {
        img: 'http://img1.shikee.com/try/2016/06/25/14244120933639105658.jpg',
        title: '标题444标题标题标题标题',
        price: 456.23,
        w_price: 89.36
      }, {
        img: 'http://img1.shikee.com/try/2016/06/26/12365720933909085511.jpg',
        title: '标题555标题标题标题标题',
        price: 556.23,
        w_price: 89.36
      }, {
        img: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg',
        title: '标题666标题标题标题标题',
        price: 656.23,
        w_price: 89.36
      }]
    },
    add () {
      console.log(123)
    },
    buy () {
      this.show = true
    },
    submit () {
      this.$router.push('/confirmation')
    }
  }
}
</script>
<style lang="scss" scoped>
  .tab {
    width: 100%;
    border-bottom: 1px solid #ddd;
    /deep/ .yd-tab-panel {
      position: absolute;
      left: 0;
      right: 0;
    }
  }

  .comm_logo {
    margin-bottom: .2rem;
  }
  .recommend{
    .title{
      margin: .1rem 0;
    }
  }
  .comm_con {
    padding: $padding;
    box-sizing: border-box;
    .list {
      margin-bottom: .2rem;
      background-color: #fff;
      padding: $padding;
      line-height: 1.5em;
      box-sizing: border-box;
      .strong {
        color: #333;
      }
      .label {
        width: 4em;
      }
      .mr {
        margin-right: .4rem;
      }
      &:last-of-type {
        margin-bottom: 0;
      }
    }
    .detail {
      .list_title {
        margin: .1rem 0;
      }
      .list_body {
        margin: .2rem 0;
        .inline-block {
          border-right: 1px solid #ddd;
          padding: 0 $mini-padding;
          &:last-child {
            border: none;
          }
        }
      }
      .place_con {
        margin-left: .4rem;
      }
    }
  }
  .popup{
    width: 100%;
    height: 100%;
    padding: $padding;
    box-sizing: border-box;
    .comm_logo{
      width: 1.98rem;
      margin-right: .4rem;
    }
    .primary{
      margin-top: .2rem;
    }
    .desc{
      margin-top: .5rem;
    }
    .label {
      margin: .2rem 0;
    }
    .weight_con{
      margin-bottom: .4rem;
    }
    .btn{
      border: 1px solid #ddd;
      padding: .1rem .3rem;
      margin-right: .1rem;
      &.active{
        color: $color-primary;
        border-color: $color-primary;
      }
    }
  }
</style>
